<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筋头云导航栏</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none;
    }
    .c-nav {
      width: 900px;
      height: 42px;
      position: relative;
      background: #000;
    }

    .c-nav ul {
      position: absolute;
    }

    .c-nav li {
      float: left;
      width: 83px;
      text-align: center;
      line-height: 42px;
    }

    .c-nav li a {
      color: #fff;
      text-decoration: none;
      display: inline-block;
      height: 42px;
    }

    .c-nav li a:hover {
      color: white;
    }

    .cloud {
      position: absolute;
      left: 0;
      top: 0;
      width: 83px;
      height: 42px;
      background: red;
    }
    </style>
</head>
<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li class="current"><a href="#">首页新闻</a></li>
            <li ><a href="#">师资力量</a></li>
            <li ><a href="#">活动策划</a></li>
            <li ><a href="#">企业文化</a></li>
            <li ><a href="#">招聘信息</a></li>
            <li ><a href="#">公司简介</a></li>
            <li ><a href="#">我是佩奇</a></li>
            <li ><a href="#">啥是佩奇</a></li>
        </ul>
    </div>
    <script>
       /* 2)	具体实现步骤如下：
a)	获取元素
b)	给所有的小li绑定事件 
c)	定义类名current 设置筋斗云的样式
d)	鼠标经过把当前小li 的位置做为目标值
e)	鼠标离开就回到起始的位置 
f)	当鼠标点击，就把当前位置做为目标值
g)	停止动画，本质是停止定时器
*/
window.addEventListener('load', function () {
      // 1. 获取元素
      var cloud = document.querySelector('.cloud');
      var c_nav = document.querySelector('.c-nav');
      var lis = c_nav.querySelectorAll('li');
      // 2. 给所有的小li绑定事件 
      // 这个current 做为筋斗云的起始位置
      var current = 0;
      for (var i = 0; i < lis.length; i++) {
        // (1) 鼠标经过把当前小li 的位置做为目标值
        lis[i].addEventListener('mouseenter', function () {
          animate(cloud, this.offsetLeft);
        });
        // (2) 鼠标离开就回到起始的位置 
        lis[i].addEventListener('mouseleave', function () {
          animate(cloud, current);
        });
        // (3) 当我们鼠标点击，就把当前位置做为目标值
        lis[i].addEventListener('click', function () {
          current = this.offsetLeft;
        });
      }
    })
    function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}
    </script>
</body>
</html>